@use 'utils/variables';

.OpenIdConvert {
    display: grid;
    padding: 0;
    border: 1px solid rgba(87, 158, 255, 0.24);
    border-radius: 4px;
    margin-bottom: 25px;
    background-color: rgba(87, 158, 255, 0.08);
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    grid-template-columns: auto 1fr;

    p {
        margin: 0 0 8px;
    }

    .btn {
        width: 191px;
        height: 32px;
        border-radius: 4px;
        margin-right: 10px;
        background: variables.$primary-color;
        color: variables.$white;
        font-size: 12px;
        font-weight: 600;
        line-height: 9px;

        &:focus,
        &:active,
        &:focus:active {
            border-color: transparent;
            outline: none;
        }
    }

    .btn-secondary {
        display: flex;
        min-width: 100px;
        height: 32px;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        margin: 0 10px 0 0;
        text-decoration: none;

        &:hover {
            background-color: variables.$primary-color;
            color: variables.$white;
        }
    }
}

.OpenIdConvert_actionWrapper {
    z-index: 100;
    display: flex;
    width: 100%;
    height: 40px;
    -webkit-flex: 0 0 60px;
    flex: 0 0 60px;
    align-items: center;
    padding: 4 0 4px;
    border-top: 1px solid alpha-color(variables.$black, 0.1);
}

.OpenIdConvert_copyWrapper {
    padding: 16px 16px 16px 12px;
}

.OpenIdConvert_imageWrapper {
    padding: 16px 0 0 16px;
}

.OpenIdConvert_image {
    height: 18px;
}

.OpenIdConvert__heading {
    padding-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}
